<!DOCTYPE html>
<html>

<head>
    <title>**旗舰店</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <link href="../lib/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link href="../lib/weui-master/dist/style/weui.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="../lib/fontawesome/css/font-awesome.min.css">
    <!-- <link rel="stylesheet" type="text/css" href="../sys/css/foot.css"> -->
    <style>
    body {
        background-color: #fff;
    }
    
    .box {
        position: relative;
    }
    
    .search {
        width: 100%;
        /*background-color: #325AA8;*/
        background-color: #FAF9FA;
        text-align: center;
        height: 40px;
        line-height: 40px;
        padding-top: 7px;
    }
    
    .search input {
        width: 70%;
        background-color: #E5E5E5;
        border: none;
        /*margin-top: 0.5rem;*/
    }
    
    .fa-search ,.fa-home{
        /*color: white;*/
        /*color:#d1d1d1; */
        color:#333;
        font-size: 1.5rem;
        padding-left: 0.5rem;

    }
    .fa-home{
        padding-right: 0.5rem;

    }
    .shopbox{
        overflow: auto;
    }
    
    .shopbox .shoptop {
        /*background-image: url(../img/3.jpg);*/
        height: 100px;
        width: 100%;
        color: #FFF;
        border-bottom: 5px solid #d1d1d1;
    }
    .shoptop img{
        width: 100%;
       
    }
    
    .shoptop-up {
        height: 50px;
    }
    
    .shoptop-down-left {
        width: 80%;
        display: inline-block;
    }
    
    .shoptop-down-left img {
        width: 50px;
        height: 50px;
    }
    
    .shoptop-down-left span {
        padding-left: 1rem;
    }
    
    .shoptop-down .mybuton {
        width: 3rem;
        height: 1.6rem;
        background-color: #EC5E2A;
        border-radius: 5px;
        border: none;
        color: #fff;
    }

    .shopbottom {
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
        height: 36px;
        line-height: 36px;
        /*background-color: #325AA8;*/
        background-color: #FAF9FA;
        /*color:white;*/
        color:#333;
        margin: 0;
    }
    .shopbottom ul{
        margin: 0;
        height: 36px;
    }

    
    .shopbottom li {
        list-style: none;
        display: inline-block;
        width: 23.5%;
        height: 36px;
        line-height: 36px;
        text-align: center;
        /*border-right: 1px solid #fff;*/
        border-right: 1px solid #d1d1d1;

    }
    .renqi{
        background-color:  #BD2D38;
        width: 98%;
        margin: 0 auto;

    }
    .renqiitem{
        width: 100%;
        text-align: center;
        padding-bottom: 12px;
    }
    .renqiimg{
        width: 100%;
        height: 120px;
        
    
    }
    .renqiitem img{
        width: 96%;
    }
    .renqiitem div{
        width: 98%;
        margin-left: 1%;
        margin-top: -5px;
        background-color: #F8DB97;
        font-size: 0.7rem;
        color:#6A4E2F;
        padding-top: 10px;

    }
   

    </style>
</head>

<body>
    <div class="box">
        <header class="search">
            <i class="fa fa-home " @click="backhome()"></i>
            <input type="text" name="" v-model.trim="goodskeywords">
            <i class="fa fa-search " @click="goodslist()"></i>
        </header>
        <section class="shopbox" >
            <div class="shoptop">
                <div class="shoptop-up"></div>
                <div class="shoptop-down">
                    <div class="shoptop-down-left">
                        <img :src="shop.headimg" alt="">
                        <span v-text="shop.shopname"></span>
                    </div>
                    <button class="mybuton">关注</button>
                </div>
            </div>
            <div class="shopmiddle">
                <div class="renqi" >
                    <img src="../img/renqi.png" alt="" class="renqiimg">
                    <div class="renqiitem" v-for="renqi in shop.renqis" @click="jumpToGoodsdetail(renqi.id)">
                        
                        <img :src="renqi.renqiimg" alt="">
                       
                        <div class="renqiitem words" v-text="renqi.renqiwords"></div>
                    </div>

                    
                </div>
            </div>
        </section> 
        <footer class="shopbottom">
            <ul>
                <li>宝贝分类</li>
                <li @click="jumpToGoodslist" @click="jumpToGoodslist">全部宝贝</li>
                <li @click="jumpToGoodslist" @click="jumpToGoodslist">镇店好茶</li>
                <li style="border-right: none" @click="jumpToGoodslist">新品上市</li>
            </ul>
        </footer>
        
    </div>
    
    <script src="../lib/jquery/jquery-1.11.0.min.js"></script>
    <script src="../lib/vue/vue.js"></script>
    <script src="../data/shop.json"></script>
    <script>
    $(function() {

        var windowHeight = $(window).height();
        $(".shopbox").css("height",windowHeight-76)
        
       
        
        
        var box = new Vue({
            el: '.box',
            data: shopdata,

            methods: {
                jumpToGoodslist:function(){
                    window.location.href="goodslist.html";
                },
                jumpToGoodsdetail:function(id){
                     window.location.href="goodsdetail.html?id="+id;

                },
                backhome:function(){
                    window.location.href="shoplist.html";

                }
                
            }
        });
        $(".shopbox .shoptop").css("backgroundImage","url("+shopdata.shop.bgimg+")");
        
    })
    </script>
</body>

</html>
